<template>
	<view class="pages">
		<view class="uni-padding-wrap">
			<view class="uni-comment-title">
				<text class="uni-comment-title-text" :style="{ color: colorValue }">{{i18n.comment}}</text>
				<view v-if="commentLists.length > 0" class="flex-row" @click="openMorePopup">
					<text class="font-size" :style="{ color: colorValue }">{{i18n.more}}</text>
					<uni-icons type="forward" size="30" :color="colorValue"></uni-icons>
				</view>
			</view>
			<view class="uni-comment" v-if="commentLists.length > 0">
				<view class="uni-comment-list" v-for="(item, index) in commentLists" :key="index" v-if="index <= 2">
					<view class="uni-comment-list-top">
						<view class="uni-comment-face">
							<image class="uni-comment-face-image" :src="item.avatar" mode="widthFix"></image>
						</view>
						<view class="uni-comment-body">
							<view class="uni-comment-top">
								<text class="font-size uni-comment-top-text">{{ item.nickname }}</text>
							</view>
							<view class="uni-comment-date">
								<view>
									<text class="font-size uni-comment-date-text">{{ item.create_time }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-comment-content-box">
						<view class="uni-comment-content-box-empty"></view>
						<view class="uni-comment-content">
							<text class="font-size content-box-text" :style="{ color: colorValue, lines: item.lines }">{{ item.content }}</text>
							<view class="open-more-btn">
								<text @click="openMore(index)"
								v-if="item.content.length > 50" class="font-size" :style="{ color: colorValue }">{{item.openMoreText}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="commentLists.length > 3" class="comment-more-popup" @click="openMorePopup">
					<view class="comment-more-btn">
						<view class="flex-row" @click="openMorePopup">
							<text class="comment-more-text" :style="{ color: colorValue }">{{i18n.moreComment}}</text>
							<uni-icons type="forward" size="30" :color="colorValue"></uni-icons>
						</view>
					</view>
				</view>
			</view>
            <view class="uni-comment" v-else>
                <view class="uni-comment-nomore-view">
                    <text class="uni-comment-nomore-text" :style="{ color: colorValue}">暂无评论</text>
                </view>
            </view>
		</view>
		<uni-popup ref="commentPopup" type="bottom">
			<view class="comment-popup-box" :style="{ backgroundColor: backgroundColorValue, height: hieght }">
				<view class="comment-popup-list-top-box">
					<text class="uni-comment-title-text" :style="{ color: colorValue }">{{i18n.comment}}</text>
					<uni-icons @click="closeMorePopup" type="close" size="50" :color="colorValue"></uni-icons>
				</view>
				<list offset-accuracy="200" @scroll="loadmore" class="comment-popup-list-box">
					<cell class="uni-comment-list" v-for="(item, index) in commentLists" :key="index">
						<view class="uni-comment-list-top">
							<view class="uni-comment-face"><image class="uni-comment-face-image" :src="item.avatar" mode="widthFix"></image></view>
							<view class="uni-comment-body">
								<view class="uni-comment-top">
									<text class="font-size uni-comment-top-text">{{ item.nickname }}</text>
								</view>
								<view class="uni-comment-date">
									<view>
										<text class="font-size uni-comment-date-text">{{ item.create_time }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="uni-comment-content-box">
							<view class="uni-comment-content-box-empty"></view>
							<view class="uni-comment-content">
								<text class="font-size content-box-text" :style="{ color: colorValue, lines: item.lines }">{{ item.content }}</text>
								<view class="open-more-btn">
									<text @click="openMore(index)"
									v-if="item.content.length > 50" class="font-size" :style="{ color: colorValue }">{{item.openMoreText}}</text>
								</view>
							</view>
						</view>
					</cell>
				</list>
			</view>
		</uni-popup>
	</view>
</template>

<script>
const globalData = getApp().globalData;
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniIcons from '@/packageA/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniPopup,
		uniIcons
	},
	data() {
		return {
			yO: 0,
			yN: 0,
		}
	},
	computed: {
		i18n() {
			return globalData.$t('detail');
		}
	},
	props: {
		commentLists: {
			type: Array,
			default: () => {
				return [];
			}
		},
		colorValue: {
			type: String,
			default: '#FCF7E9'
		},
		backgroundColorValue: {
			type: String,
			default: '#FCF7E9'
		},
		hieght: {
			type: String,
			default: ''
		},
        scrollLock: {
			type: Boolean,
			default: false
		},
        scrollEnd: {
			type: Boolean,
			default: false
		},
        
	},
	methods:{
        loadmore(e){
            let _this = this;
            _this.yN = e.contentOffset.y;
            if (_this.yO == 0) {
                _this.yO = e.contentOffset.y;
                return;
            }
            if (_this.yN >= _this.yO) {
                return;
            }
            if (_this.yN < _this.yO && !_this.scrollLock && !_this.scrollEnd) {
                _this.yO = e.contentOffset.y;
                uni.$emit('getMore');
            }
        },
		openMore (index){
			if (this.commentLists[index].openMoreText == '◢ 展开') {
				this.commentLists[index].lines = 0;
				this.commentLists[index].openMoreText = '◥ 收起';
			} else {
				this.commentLists[index].lines = 3;
				this.commentLists[index].openMoreText = '◢ 展开';
			}
		},
		openMorePopup () {
			this.$refs.commentPopup.open();
		},
		closeMorePopup() {
			this.$refs.commentPopup.close();
		}
	},
	watch: {
		commentLists: {
			handler: async function(newVal, oldVal) {
				return newVal;
			}
		}
        
	}
};
</script>

<style>
.font-size {
	font-size: 28upx;
}
.flex-row{
	flex-direction: row;
}
.uni-comment {
	padding: 5rpx 0;
	flex-direction: column;
}
.uni-comment-list-top {
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 750rpx;
}

.uni-comment-list {
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 750rpx;
}

.uni-comment-content-box {
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	width: 750rpx;
}

.uni-comment-content-box-empty {
	width: 80upx;
	margin-right: 20upx;
}
.content-box-text {
	width: 600upx;
	text-overflow: ellipsis;
}
.uni-comment-face {
	width: 80upx;
	height: 80upx;
	border-radius: 100%;
	margin-right: 20upx;
    background-color: #FFFFFF;
}

.uni-comment-face-image {
	width: 80upx;
	height: 80upx;
	border-radius: 100%;
}

.uni-comment-body {
	width: 750rpx;
}

.uni-comment-top {
	justify-content: space-between;
}

.uni-comment-top-text {
	color: #0a98d5;
	font-size: 24upx;
}

.uni-comment-date {
	line-height: 38upx;
	flex-direction: row;
	justify-content: space-between;
	flex: 1;
}

.uni-comment-date-text {
	color: #666666;
	font-size: 24upx;
	line-height: 38upx;
}

.uni-comment-content {
	font-size: 28upx;
	padding: 8rpx 0;
}
.uni-comment-title {
	
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.uni-comment-title-text {
	padding: 20upx 0;
	font-weight: bold;
	color: #FCF7E9;
	font-size: 36upx;
}
.uni-padding-wrap {
	padding: 20upx 20upx;
}
.open-more-btn {
	padding: 20upx 0;
	flex-direction: row;
	justify-content: flex-end;
}
.comment-more-popup {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 30upx 0;
}
.comment-more-text {
	font-size: 30upx;
}
.comment-popup-box {
	border-top-left-radius: 20upx;
	border-top-right-radius: 20upx;
}
.comment-popup-list-box{
	padding: 0 20upx 60upx 20upx;
}
.comment-popup-list-top-box {
	padding: 15upx 20upx;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.uni-comment-nomore-text{
    font-size: 30upx;
}
</style>
